*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	font-family: 'Poppins',sans-serif;
}
body{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: #222327;
}
.navigation{
	position: relative;
	width: 450px;
	height: 80px;
	background:#2f2f2f;
	display: flex;
	justify-content: center;
	border-radius: 10px;
}
.navigation ul{
	position: relative;
	display: flex;
	width: 400px;
}
.navigation ul li{
	position: relative;
	list-style: none;
	width: 80px;
	height: 80px;
}
.navigation ul li a{
	text-decoration: none;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	text-align: center;
	font-weight: 500;
}
.navigation ul li a .icon{
	position: relative;
	display: block;
	line-height: 85px;
	font-size: 1.5em;
	transition: 0.5s;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
}
.navigation ul li a:hover .icon{
	color: rgba(255, 255, 255, 1);
}
.navigation ul li.active a .icon{
	color: #29fd53;
	transform: translateY(-8px);
}
.navigation ul li a .text{
	position: absolute;
	font-weight: 600;
	font-size: 0.6em;
	color: #222327;
	text-transform: uppercase;
	transform: translateY(0px);
	letter-spacing: 0.05em;
	opacity: 0;
	z-index: 10;
}
.navigation ul li.active a .text{
	opacity: 1;
	transform: translateY(16px);
	
}
.indicaotr{
	position: absolute;
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: 0.5s;
}
.indicaotr::before{
	content: '';
	position: absolute;
	bottom: 14px;
	width: 80%;
	height: 16px;
	background: #29fd53;
	border-radius: 10px;
}
.navigation ul li:nth-child(2).active ~ .indicaotr{
	transform: translateX(calc(80px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicaotr{
	transform: translateX(calc(80px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicaotr{
	transform: translateX(calc(80px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicaotr{
	transform: translateX(calc(80px * 4));
}